<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.6/vue.min.js"></script>
</head>
<style>
    .active{
        color:blue;
    }
</style>
<body>
<div id="app">
    {{msg}}
    <div v-for="item in list1">
        <div v-if="item.age < 18 ">未成年</div>
        <div v-else-if="item.age > 18 && item.age < 30">青年</div>
        <div v-else-if="item.age > 30 && item.age < 40" v-bind:style="cssStyle">中年</div>
        <div v-else="item.name 18 " v-bind:class="[,'add','more',{'active':item.age > 18}]">老年</div>
        {{item.name}}-{{item.age}}
    </div>
    <p>
        <button type="button" @click="change1()">button++</button>
        <button type="button" @click="change2()">button--</button>
    </p>
</div>
</body>
<script>
    /**
     * v-for
     */
    new Vue({
        el:"#app",
        data:{
            msg: 'hello vue',
            count:0,
            cssStyle:{
                color:"red",
            },
            class:'c1',
            list1:[
                {name:'liwei1',age:'16'},
                {name:'liwei2',age:'28'},
                {name:'liwei3',age:'38'},
                {name:'liwei4',age:'48'},
            ],
            list:[1,2,3,4,5],
        },
        methods:{
            change1:function(){
                this.count++;
            },
            change2:function(){
                this.count--;
            },
        }
    });
</script>
</html>




























